package myJs.cps.myTable

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.all._
import myJs.cps.BootstrapTableCp.Column

import myJs.tool.Pojo._
import myJs.tool.Tool

import scala.collection.immutable.SeqMap
import scala.concurrent.Future
import scala.scalajs.js
import scala.scalajs.js.{JSON, |}
import myJs.Implicits._

/** Created by yz on 15/9/2023
  */
object SelectColumnCp {

  case class Props(
      columnShowMap: SeqMap[String, Boolean],
      fieldColumnMap: SeqMap[String, Column],
      columnShowMapChange: SeqMap[String, Boolean] => Callback,
      columnGroupMap: SeqMap[String, List[String]] = SeqMap.empty,
      fixedColumns: List[String] = List("id")
  ){
    @inline def render: VdomElement = {
      Component(this)
    }

  }

  val Component = ScalaFnComponent[Props] { props =>
    val canSelectColumns = props.columnShowMap.filterNot { case (k, v) =>
      props.fixedColumns.contains(k)
    }.keyList

    object FTool {

      def revSelect =  {
        val curColumnShows = props.columnShowMap.map { case (k, v) =>
          if (canSelectColumns.contains(k)) {
            (k, !v)
          } else (k, v)
        }
        props.columnShowMapChange(curColumnShows)
      }

      def selectAll =  {
        val curColumnShows = props.columnShowMap.map { case (k, v) =>
          (k, true)
        }
        props.columnShowMapChange(curColumnShows)
      }

      def columnShow(curField: String, b: Boolean) =  {
        val curColumnShows = props.columnShowMap.updated(curField, b)
        props.columnShowMapChange(curColumnShows)
      }

      def groupSelectAll(key: String) =  {
        val curColumnShows = props.columnShowMap
          .map { case (k, v) =>
            val b = if (props.columnGroupMap(key).contains(props.fieldColumnMap(k).title)) {
              true
            } else v
            (k, b)
          }
        props.columnShowMapChange(curColumnShows)
      }

      def groupRevSelect(key: String) =  {
        val curColumnShows = props.columnShowMap.map { case (k, v) =>
          val b = if (props.columnGroupMap(key).contains(props.fieldColumnMap(k).title)) {
            if (canSelectColumns.contains(k)) {
              !v
            } else v
          } else v
          (k, b)
        }
        props.columnShowMapChange(curColumnShows)
      }

    }

    div(
      label(
        "请选择要显示的列: ",
        button(
          onClick --> FTool.selectAll,
          marginBottom := 0.px,
          marginRight := 10.px,
          className := "btn btn-primary btn-xs",
          " 全选"
        ),
        button(
          onClick --> FTool.revSelect,
          marginBottom := 0.px,
          className := "btn btn-primary btn-xs",
          " 反选"
        )
      ),
      if (props.columnGroupMap.isEmpty) {
        div(
          className := "checkbox",
          props.columnShowMap
            .filter { case (field, show) =>
              canSelectColumns.contains(field)
            }
            .toVdomArray { case (field, show) =>
              props.fieldColumnMap
                .get(field)
                .map { column =>
                  span(
                    key := s"${field}",
                    span(
                      whiteSpace.nowrap,
                      input(
                        marginLeft := 0.px,
                        `type` := "checkbox",
                        checked := show,
                        value := s"${field}",
                        onChange --> FTool.columnShow(field, !show)
                      ),
                      label(marginRight := 15.px, paddingLeft := 0.px, marginLeft := 20.px, column.title)
                    ),
                    " "
                  )
                }
                .getOrElse(span(key := field))
            }
        )
      } else {
        props.columnGroupMap.toVdomArray { case (groupName, columnNames) =>
          div(
            key := s"${groupName}",
            label(
              marginBottom := 0.px,
              marginTop := 10.px,
              s"${groupName}: ",
              button(
                onClick --> FTool.groupSelectAll(groupName),
                marginBottom := 0.px,
                marginRight := 10.px,
                className := "btn btn-primary btn-xs",
                " 全选"
              ),
              button(
                onClick --> FTool.groupRevSelect(groupName),
                marginBottom := 0.px,
                className := "btn btn-primary btn-xs",
                " 反选"
              )
            ),
            div(
              marginTop := 5.px,
              className := "checkbox",
              props.columnShowMap
                .filter { case (field, show) =>
                  canSelectColumns.contains(field)
                }
                .filter { case (field, show) =>
                  columnNames.contains(props.fieldColumnMap(field).title)
                }
                .toVdomArray { case (field, show) =>
                  props.fieldColumnMap
                    .get(field)
                    .map { column =>
                      span(
                        key := s"${field}",
                        span(
                          whiteSpace.nowrap,
                          input(
                            marginLeft := 0.px,
                            `type` := "checkbox",
                            checked := show,
                            value := s"${field}",
                            onChange --> FTool.columnShow(field, !show)
                          ),
                          label(marginRight := 15.px, paddingLeft := 0.px, marginLeft := 20.px,
                            column.labelE.getOrElse(span(column.title))
                          )
                        ),
                        " "
                      )
                    }
                    .getOrElse(span(key := field))
                }
            )
          )
        }

      }
    )

  }

}
